<template>
  <div>
    <div class="load" v-if="!ishow">
      <van-loading class="load" vertical />
    </div>
    <div v-if="ishow">
      <h2 class="block__title">基础信息</h2>
      <van-cell-group>
        <van-cell class="border_bottom" title="昵称" :value="data.nicheng" />
        <van-cell
          class="border_bottom"
          title="加点方向"
          :value="data.nums_type"
        />
        <van-cell class="border_bottom" title="属性" :value="data.nums" />
        <van-cell title="装备\附魔 " :value="data.nums_bf" />
      </van-cell-group>
      <h2 class="block__title">属性点总览</h2>
      <van-cell-group>
        <van-cell class="border_bottom" title="力量" :value="data.liliang" />
        <van-cell class="border_bottom" title="敏捷" :value="data.minjie" />
        <van-cell class="border_bottom" title="智力" :value="data.zhili" />
        <van-cell title="感知 " :value="data.ganzhi" />
      </van-cell-group>
      <h2 class="block__title">人物属性</h2>
      <van-cell-group>
        <van-cell
          v-for="item in data.attrs_data"
          :key="item"
          class="border_bottom"
          :title="item.name"
          :value="item.value"
        />
      </van-cell-group>
    </div>
    <tabbar :active_idx="0" />
  </div>
</template>

<script>
import { Cell, CellGroup } from 'vant'
import { Loading } from 'vant'
import tabbar from './tabbar.vue'
import axios from 'axios'
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Loading.name]: Loading,
    tabbar,
  },
  data() {
    return {
      data: [],
      ishow: false,
    }
  },
  methods: {
    get_info: function () {
      axios.get('/apis/rwmb/').then((res) => {
        // console.log(res.data)
        this.data = res.data
        this.ishow = true
      })
    },
  },
  mounted: function () {
    this.get_info()
  },
}
</script>

<style lang="scss" scoped>
.load {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.block__title {
  margin: 0;
  padding: 32px 16px 16px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
}
.border_bottom {
  border-bottom: 1px solid rgb(235, 235, 235);
}
</style>
